<template>
  <div class="userinfobusiness">
    <table>
      <tr>
        <td>名称</td>
        <td>原本数据</td>
        <td>修改数据</td>
      </tr>
      <tr>
        <td>姓名</td>
        <td>aa</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>性别</td>
        <td></td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>身份证号</td>
        <td></td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>用地项目名称</td>
        <td>aa</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>参保类型</td>
        <td></td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>基准补贴年限</td>
        <td></td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>享受困难补贴年限</td>
        <td>aa</td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>企业缴费年限</td>
        <td></td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>享受补贴年限</td>
        <td></td>
        <td><input type="text" /></td>
      </tr>
      <tr>
        <td>补贴金额</td>
        <td>aa</td>
        <td><input type="text" /></td>
      </tr>
    </table>
    <el-row style="margin-top: 20px">
      <el-button>完成</el-button>
      <el-button>退回</el-button>
    </el-row>
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px" 
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ 'height': '48px'}">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="状态" width="100"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="address" label="性别"> </el-table-column>
      <el-table-column prop="address" label="出生日期"> </el-table-column>
      <el-table-column prop="address" label="身份证号"> </el-table-column>
      <el-table-column prop="address" label="社保卡号"> </el-table-column>
      <el-table-column prop="address" label="社保缴费状态"> </el-table-column>
      <el-table-column prop="address" label="享受困难补贴年限">
      </el-table-column>
      <el-table-column prop="address" label="企业缴费年限"> </el-table-column>
      <el-table-column prop="address" label="基准补贴年限"> </el-table-column>
      <el-table-column prop="address" label="享受补贴年限"> </el-table-column>
      <el-table-column prop="address" label="补贴金额"> </el-table-column>
      <el-table-column prop="address" label="参保类型"> </el-table-column>
      <el-table-column prop="address" label="创建时间"> </el-table-column>
      <el-table-column prop="address" label="备注"> </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      msg: "人员信息更改审核",
      value: "",
      value1: "",
      labelPosition: "right",
      tableData: [],
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style scoped lang="scss">
.userinfobusiness {
  padding: 30px;
  > table {
    max-width: 800px;
    border: 1px solid #ccc;
    tr {
      // border: none;
      td {
        box-sizing: border-box;
        padding: 0 20px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        height: 40px;
        line-height: 40px;
        input {
          border: none;
          width: 100%;
          height: 40px;
        }
      }
      td:nth-child(1) {
        width: 200px;
      }
      td:nth-child(2) {
        width: 300px;
      }
      td:nth-child(3) {
        border-right: none;
        width: 300px;
        padding: 0;
      }
    }
    tr:first-child {
      text-align: center;
      font-weight: bold;
    }
    tr:last-child {
      td {
        border-bottom: none;
      }
    }
  }
  .el-row {
    max-width: 800px;
    text-align: right;
  }
}
</style>